<!doctype html> 
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="../assets/css/rock-paper-scissors.css">
    <title>Rock Paper Scissors</title>
  </head>
  <body>
    <header>
        <h1>Rock Paper Scissors Game</h1>
    </header>

        <div class="container">
            <div class="row">
                <div class="col-3 ">
                    <div class="card" >
                        <!--<img class="card-img-top" src="..." alt="Card image cap">-->
                        <h2></h2>
                        <div class="card-body">
                            <hr>
                          <h4>User's<br>Choice</h4>
                        </div>
                    </div>
                </div>
                <div class="col-6 ">
                    <div class="score_board">
                        <div id="user_id"class="identity_card">User</div>
                        <div id="comp_id"class="identity_card">Comp</div>
                        <span id="user_score">0</span>:<span id="comp_score">0</span>
                    </div>
                
                    <div class="result">
                        <p>Let's Test Your Luck</p>
                    </div>
                
                    <div class="choices">
                        <div class="choice">
                            <img id="r" src="../assets/Images/r-p-s/rock2.png" alt="Rock">
                        </div>
                        <div class="choice">
                            <img id="p" src="../assets/Images/r-p-s/paper2.png" alt="Paper">
                        </div>
                        <div class="choice">
                            <img id="s" src="../assets/Images/r-p-s/sessior2.png" alt="Sessior">
                        </div>
                    </div>
                
                    <div class="order">
                        <p>Make Your Move.</p>
                    </div>
                    
                    <div class="text-center">
                        <button type="button" class="btn btn-primary btn-lg" id="reset_button">Reset</button>
                      </div>
                </div>
                <div class="col-3 set">
                    <div class="card card_right justify-content-center">
                        <!--<img class="card-img-top" src="..." alt="Card image cap">-->
                        <h2></h2>
                        <div class="card-body">
                            <hr>
                          <h4>Computer's Choice</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
    <script src="../assets/js/rock-paper-scissors.js"></script>
  </body>
</html>